<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import  { BQGISCreateToolManager } from '../../../../static/CIM/BQGIS-measure.js'

let toolManager = null

onMounted(() => {
  toolManager = BQGISCreateToolManager(viewer);
})

let measureMenu = [
    {name:"空间距离",value:""},
    {name:"垂直距离",value:""},
    {name:"水平距离",value:""},
    {name:"区域面积",value:""},
    {name:"角度测量",value:""},
]

//用来保存选中的测量工具
let activeName = ref("")

const onClickMeasure = (name)=>{
    toolManager.clear();
	activeName.value = activeName.name == name ? '' : name;
    if(name == "空间距离"){
        toolManager.DistanceMeasureTool();
    }else if(name == "垂直距离"){
        toolManager.DistanceVertMeasureTool()
    }else if(name == "水平距离"){
        toolManager.DistanceHorzMeasureTool();
    }else if(name == "区域面积"){
        toolManager.PolygonAreaTool();
    }else if(name == "角度测量"){
        toolManager.AngleMeasureTool();
    }
}
</script>

<template>
  <div class="measure-item" :class="{active:activeName == item.name }" :key="index" v-for="(item,index) in measureMenu" @click.stop="onClickMeasure(item.name)">
      <span class="">{{item.name}}</span>
  </div>
</template>

<style lang="scss" scoped>
.measure-item{
    height: 50px;
    line-height: 50px;
    &.active{
        color: #84bffa;
    }
}
</style>